.controls {
  position: fixed;

  z-index: 20;
  bottom: -1px;
  left: 0;

  display: flex;
  width: 100%;
  align-items: center;

  padding: 24px;

  border-top: 1px solid rgba(255, 255, 255, 0.2);
  background: var(--panel-background);

  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.6);
  gap: 32px;
  overflow-x: auto;

  @media (min-width: 768px) {
    left: 50%;
    overflow: initial;
    width: auto;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    transform: translateX(-50%);
  }
}
